<template>
    <div id="tmpl">
        <!--1.0 商品轮播图-->
        <div class="silder">
            <silder :imgs="imgs"></silder>
        </div>
        <!-- 2.0 实现商品购买区-->
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价：<s>￥{{info.market_price}}</s>   销售价：<span>￥{{info.sell_price}}</span>
                </li>
                <li>
                    购买数量：<inputNumber v-on:dataobj="getcount"></inputNumber>
                    <transition name="show"
                            @before-enter="beforeEnter"
                            @enter="enter"
                            @after-enter="afterEnter">
                        <div class="ball" v-if="isShow"></div>
                    </transition>
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
                </li>
            </ul>
        </div>
        <!-- 3.0 图文详情-->
        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stick_quantity}}</li>
                <li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <!-- 4.0 商品的评论-->
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
    import silder from '../subcom/silder.vue';
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';
    import inputNumber from '../subcom/inputNumber.vue';
    // 使用vm对象
    import {vm,COUNTSTR} from '../../kits/vm.js';
    import {setItem,valueObj} from '../../kits/localSg.js';
    export default{
        components:{
            silder,
            inputNumber
        },
        data(){
            return {
                data:0, //商品id
                imgs:[],
                info:{}, //存储商品的详细信息
                inputNumberCount:1, //表示当前购买商品的数量
                isShow:false //控制小球的显示状态
            }
        },
        created(){
            // 获取url传入的商品id值
            this.id = this.$route.params.id;
            this.getimgs();
            this.getinfo();
        },
        methods:{
            getinfo(){
                var url = common.apidomain+'/api/goods/getinfo/'+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.info = res.body.message[0];
                });
            },
            getimgs(){
                var url = common.apidomain+'/api/getthumimages/'+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.imgs = res.body.message;
                });
            },
            getcount(count){
                //获取inputNumber组建中 传入的值
                this.inputNumberCount = count;
            },
            //加入购物车方法
            toshopcar(){
                // 触发事件
                vm.$emit(COUNTSTR,this.inputNumberCount);
                // 将数据追加到localStorage中
                valueObj.goodsid = this.id;
                valueObj.count = this.inputNumberCount;
                setItem(valueObj);
                // 实现小球动画
                this.isShow = !this.isShow;
            },
            // 定义动画的三个方法
            beforeEnter(ele){
                // 设定小球的初始位置
                ele.style.transform = 'translate(0px,0px)';
            },
            enter(ele,done){
                //保证小球出现动画
                ele.offsetWidth;
                // 设置小球的结束位置
                ele.style.transform = 'translate(75px,336px)';
                // 结束动画
                done();
            },
            afterEnter(){
                // 重置小球的初始状态
                this.isShow = !this.isShow;
            }
        }
    }
</script>

<style scoped>
    .silder {
        border:1px solid rgba(0,0,0,0.4);
        border-radius: 5px;
        margin: 5px;
    }
    #buy, #params, #other {
        margin: 5px;
        padding: 5px;
        border:1px solid rgba(0,0,0,0.4);
        border-radius: 5px;
    }
    .line {
        height: 1px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    #buy h4 {
        color: #0094ff;
        padding: 5px;
    }
    #buy ul, #params ul {
        padding-left: 0;
    }
    #buy li {
        list-style: none;
        padding: 8px;
        position: relative;
    }
    #buy .price span {
        color: red;
    }
    #params li{
        list-style: none;
        position: relative;
    }
    #other .imgdesc {
        margin-bottom: 20px;
    }
    .ball {
        background-color: red;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        left: 150px;
        top: 10px;
        transition: all 0.4s ease;
        z-index: 100;
    }
</style>